<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
</head>
<body>
    <h1>拦截器练习</h1>
    <input type="text" id="idt">
    <button id="btn">提交</button>
    <button id="cancel">取消请求</button>
    <script>
        // 创建一个axios实例，并配置这个实例
        const deced=axios.create({
            // 配置基本的路径
            baseURL:"/",
            // 配置超时时间
            timeout:10000,
            // 配置请求头
            headers:{}
        })

        // 请求一个按钮
        const oIpt =document.getElementById("idt")
         const oBtn=document.getElementById("btn")
         const oCancel=document.getElementById("cancel")

        //  拿到一个取消请求的对象（cancelToken是一个构造函数）
        const CancelToken=axios.CancelToken;
    // 定义一个全局变量
        let cancel=null
        //  绑定一个事件  async是异步的意思
        oBtn.onclick=async function(){
            // 把请求发出去 iptValue是请求的值的意思  value 是请求的数据
            const iptValue =oIpt.value;
        // 对它进行一个异步的处理
        try{
            //  请求路径
            const result =await deced.get("/userLazy",{
                // 给他转一个配置
                params:{
                    userId: iptValue
                },
        // 在配置对象中配置一个cancelToken的配置项，值是实例化的cancelToken对象
        // 他的参数是一个回调函数
        cancelToken: new CancelToken((c)=>{
        // 当请求发送的时候，这个回调函数会被执行，并接受一个参数，这个参数其实就是取消当前的函数
            console.log(c);
            cancel = c;
        })
            })
            console.log(result);
        }catch(e){
            console.log(e.message,"出现错误了");
        }
        }

        // 取消请求点击事件
        oCancel.onclick=function(){
            cancel()
        }
        // 把这个回调函数拿出去外面用，首先要在全局定义一个变量

        // 终结：
        /* CancelToken 提供一个对象
        如果你写的一个东西很有可能被取消请求那么就要配置一个cancalToke构造对象
        当请求发送的时候，我们会接受一个参数这个参数就是这个取消函数
 
  
        */ 
    </script>
</body>
</html>